<template lang="pug">
  Scroll.img-preview-wrap(:scrollY="true", ref='scroll', :data='[url]', :scrollX="true")
    img.img(:src="url" ref="img")
    .ctrl-bar.tac
      span.ctrl-item.add(@click.stop="add") +
      span.ctrl-item.minus(@click.stop="minus") -
      span.ctrl-item.close(@click.prevent="close") ×
</template>

<script>
import Scroll from '@/components/Scroll'

export default {
  props: {
    url: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
    }
  },
  mounted() {
    this.$refs.img.style.width = document.documentElement.clientWidth + 'px'
    this.alignCenter()
  },
  methods: {
    add(e) {
      // 点击事件重复 scroll插件影响
      if (this.timer1) {
        clearTimeout(this.timer1)
      }
      this.timer1 = setTimeout(() => {
        this.$refs.img.style.width =  this.$refs.img.width*1.2 +'px'
        this.alignCenter()
        this.$refs.scroll.initScroll()
        clearTimeout(this.timer1)
      }, 10);
      // this.$refs.img.style.height =  this.$refs.img.height*1.2 +'px'
    },
    minus(e) {
      if (this.timer2) {
        clearTimeout(this.timer2)
      }
      this.timer2 = setTimeout(() => {
        this.$refs.img.style.width =  this.$refs.img.width/1.2 +'px'
        this.alignCenter()
        this.$refs.scroll.initScroll()
        clearTimeout(this.timer2)
      }, 10);
    },
    alignCenter() {
      let marginTop = window.innerHeight - this.$refs.img.height
      let marginLeft = window.innerWidth - this.$refs.img.width
      this.$refs.img.style['margin-left'] =   marginLeft/2 + 'px'
      this.$refs.img.style['margin-top'] = marginTop/2 + 'px'
    },
    close() {
      this.$parent.closePreview()
    }
  },
  watch: {
    url(data) {
      this.alignCenter()
    },
    deep: true,
    immediate: true
  },
  components:{
    Scroll
  }
}
</script>

<style lang="stylus">
@import '../../assets/styles/mixin.styl'
.img-preview-wrap
  full-cover()
  background-color: rgba(3, 11, 27, .78)
  z-index: 5001
  .ctrl-bar
    right: 5px
    bottom: 15px
    top: auto
  .ctrl-item
    display: block
    width: 32px
    height: 32px
    line-height: 30px
    border-radius: 50%
    text-shadow: 0 0 2px rgb(0, 0, 0);
    box-shadow: 0 0 2px rgb(0, 0, 0);
    margin-top: 10px
    color: #fff
    font-size: 32px
    background-color: #333
    bd-1px(#fff, 50%)

</style>
